<template>
    <div class="shopstore">
        <header>
            <img src="//common-1253410441.file.myqcloud.com/activityimg/20171211200335.jpg" alt="">
        </header>
        <div class="listinfo">
            <span><strong>彩豆  <b>{{balance}}</b></strong><icon name="right" scale="1.2"></icon></span>
            <span @click="goExchangerecords"><strong>兑换记录</strong><icon name="right" scale="1.2"></icon></span>
        </div>
        <section class="prolistcon">
            <ul>
                <li v-for="(item,index) in prolist" :key="index" @click="goProInfo(item)">
                    <span class="title">{{item.name}}</span>
                    <img :src="item.icon" alt="">
                    <strong><b>{{item.price}}</b>彩豆</strong>
                    <a :class="[item.stock===0?'hasnone':'']" href="javascript:;">{{item.stock===0?'商品不足':'兑换'}}</a>
                </li>
            </ul>
        </section>
    </div>
</template>

<script>
    import Button from '../../components/Button.vue';
    import DomLoad from '../../components/DomLoad';
    import {getMytoken} from '../../service/common'
    import {getProListR} from '../../service/shop';
    import store from '../../store/index';
    export default {
        components: {
            myButton: Button,
            DomLoad
        },
        data() {
            return {
                balance: 0,
                prolist: []
            };
        },
        created() {
            this.getdata();
        },
        computed: {},
        methods: {
            goExchangerecords(){
                this.$router.push('/shop/exchangerecords')
            },
            goProInfo(item){
                if(this.balance < item.price) {
                    this.$vux.toast.text('彩豆不够');
                    return;
                }
                this.$router.push(`/shop/exchange/${item.id}`)
            },
            async getdata(){
                const {token, balance}=await getMytoken();
                if(!token) {
                    this.$vux.toast.text('请登录');
                    return;
                }
                this.balance = balance || 0;
                const {data}=await getProListR();
                if(data && data.code === 0) {
                    this.prolist = data.data.all;
                    this.bean = data.data.bean;
                }
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../app";

    .shopstore {
        img {
            width: 100%;
            display: block;
        }
    }

    .listinfo {
        color: #333;
        height: 100px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: @fz30;
        span {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            strong {

            }
            b {
                color: @color22;
            }
            svg {
                margin-left: 60px;
                color: @color4;
            }
        }
    }

    .prolistcon {
        background: #fff;
        display: flex;
        justify-content: center;
        color: #333;
        text-align: center;
        ul {
            display: flex;
            width: 702px;
            justify-content: space-between;
            flex-wrap: wrap;
            li {
                display: flex;
                flex-direction: column;
                width: 340px;
                height: 465px;
                border-radius: 6px;
                border: 2px solid @color14;
                margin-bottom: 25px;
                .title {
                    line-height: 120px;
                    text-align: center;
                    font-size: @fz30;
                }
                img {
                    height: 222px;
                    display: block;
                }
                strong {
                    line-height: 60px;
                    b {
                        color: @color22;
                    }
                }
                a {
                    width: 220px;
                    height: 46px;
                    border-radius: 46px;
                    background: @color22;
                    color: #fff;
                    line-height: 46px;
                    display: block;
                    margin: 0 auto;
                    &.hasnone {
                        background: @color3;
                    }
                }
            }
        }
    }

</style>